<!--
 * @Author: coocase
 * @Date: 2021-03-12 09:35:19
 * @LastEditTime: 2021-06-07 11:19:33
 * @LastEditors: coocase
 * @Description: 详情页
 * @FilePath: \git\dami\src\pages\detail\detail.vue
-->
<template>
  <div class="detail-wrap">
    <div class="detail-title">
      <span>详情 ></span>
      <span>地点 ></span>
      <span>分类 ></span>
      <span>名称</span>
    </div>
    <detail-intro
      :datas="datas"
      v-if="datas"
      @getBuyInfo="getBuyInfo"
    ></detail-intro>
    <div class="detail-info">
      <detail-info :datas="datas"></detail-info>
    </div>
  </div>
</template>

<script>
import detailIntro from "./detailIntro";
import detailInfo from "./detailInfo";

export default {
  name: "Detail",
  data: function () {
    return {
      datas: JSON.parse(localStorage.getItem("itemInfo")),
    };
  },
  components: {
    detailIntro,
    detailInfo,
  },
  watch: {
    $route(to, from) {
      // 对路由变化作出响应...
      //可以使用$router.go(0)进行刷新,（补充，该方法在ios手机上无效）
      //可以改用window.location.reload()
      this.$router.go(0);
    },
  },
  methods: {
    // getDetail: function () {
    //   this.$http
    //     .getRequest({
    //       api: "detail",
    //       data: {},
    //     })
    //     .then((res) => {
    //       this.datas = res;
    //     })
    //     .catch((err) => {
    //       console.log(err);
    //     });
    // },
    getBuyInfo: function (val) {
      this.$emit("getBuyInfo", this.datas);
    },

    backToTop: function () {
      //二者必定有一个为0

      var top = document.body.scrollTop || document.documentElement.scrollTop;

      //定义速度
      var speed = top / 5;

      var timer = setInterval(() => {
        if (document.body.scrollTop != 0) {
          document.body.scrollTop -= speed;
        } else if (document.documentElement.scrollTop != 0) {
          document.documentElement.scrollTop -= speed;
        } else if (
          document.body.scrollTop == 0 ||
          document.documentElement.scrollTop == 0
        ) {
          clearInterval(timer);
        }
      }, 30);
    },
  },
  mounted: function () {
    // this.getDetail();
    //每次加载页面 返回顶部
    this.backToTop();
  },
  updated: function () {},
};
</script>

<style scoped>
.detail-wrap {
  width: 1200px;
  margin: 0 auto;
}
</style>